<template>
  <div class="main">
    <div class="saleing">
      <div class="title disflex">
        <h2>出售信息</h2>
        <!-- <a>查看更多</a> -->
      </div>
      <div class="filter bgfff">
        <table>
          <tr>
            <td style="width:80px;">品牌</td>
            <td>
              <a
                @click="logoClick(item.name)"
                v-for="(item,index) in logoArr"
                :key="index"
              >{{item.name}}</a>
            </td>
          </tr>
          <tr>
            <td style="width:80px;">品牌</td>
            <td>
              <a>不限</a>
              <a>品牌A</a>
              <a>品牌N</a>
            </td>
          </tr>
          <tr>
            <td style="width:80px;">出货地</td>
            <td>
              <el-form
                :inline="true"
                size="small"
                :model="formArea"
                class="area-form-inline disflex"
              >
                <el-form-item label>
                  <el-select v-model="formArea.region" placeholder="省/市">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label>
                  <el-select v-model="formArea.region" placeholder="市/区">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label>
                  <el-select v-model="formArea.region" placeholder="区/县">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </td>
          </tr>
          <tr>
            <td style="width:80px;">综合</td>
            <td>
              <el-form
                :inline="true"
                size="small"
                :model="formArea"
                class="area-form-inline disflex"
              >
                <el-form-item label>
                  <el-select v-model="formArea.region" placeholder="综合排序">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label>
                  <el-select v-model="formArea.region" placeholder="类型">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label>
                  <el-select v-model="formArea.region" placeholder="介质">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label>
                  <el-select v-model="formArea.region" placeholder="燃烧种类">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label>
                  <el-select v-model="formArea.region" placeholder="年限">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </td>
          </tr>
          <tr>
            <td>当前筛选</td>
            <td>
              <div class="filterre">
                <el-tag
                  v-for="(tag,index) in tags"
                  :key="index"
                  closable
                  @close="handleClose(tag)"
                  v-if="!tag.isHide"
                >{{tag.name}}：{{tag.status}}</el-tag>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <!-- 列表组件 -->
      <buy-list></buy-list>
      <div class="page">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>
    </div>
    <!-- saleing --end -->
  </div>
</template>
<script>
// import configs from "../config.js";
import buyList from "@/components/buyList";
export default {
  components: { buyList },
  data() {
    return {
      search: "",
      activeIndex: "1",
      formArea: {},
      logoArr: [
        { name: "不限" },
        { name: "品牌A" },
        { name: "品牌B" },
        { name: "品牌W" }
      ],
      tags: [
        { name: "品牌", status: "", isHide: true },
        { name: "吨位", status: "", isHide: true },
        { name: "出货地", status: "", isHide: true },
        { name: "综合", status: "", isHide: true }
      ]
    };
  },
  computed: {},
  mounted() {},
  created() {},

  methods: {
    handleClose(tag) {
      console.log(tag);
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    logoClick(name) {
      this.tags[0].isHide = false;
      this.tags[0].status = name;
    }
  },

  mounted() {}
};
</script>
<style scoped lang="scss">
.filter {
  padding: 15px;
  margin-bottom: 30px;
  table {
    width: 100%;
    border: 1px solid #f8f8f8;
    tr {
      line-height: 40px;
      border-bottom: 1px solid #f8f8f8;
      td {
        padding: 0 10px;
        a {
          line-height: 40px;
          display: inline-block;
          padding: 0 10px;
        }
      }
      td:nth-child(1) {
        background: #f5f5f5;
        text-align: center;
      }
    }
  }
}
</style>
